<template>
  <div class="wrap">
    <ul class="nav-wrap">
        <li  @click="onChangeSection()" >
            <a :class="{activate : selecttype == -1 }">全部</a>
            <span>/</span>
        </li>
      <li
        v-for="item in sectionList"
        :key="item.id"
       
        @click="onChangeSection(item)"
      >
        <a  :class="{activate : selecttype == item.id }" >{{ item.section }}</a>
        <span>/</span>
      </li>
    </ul>
    <div class="office">
      <h3>{{ company.company }}</h3>
      <div class="office-content" v-if="isDetail" style="text-align: left">
        <p>&#12288;{{ company.desc }}</p>
      </div>
      <div class="office-btn">
        <div class="btn-details" @click="showDetail">
          {{$t('click_intro')}}
          <span v-if="isDetail">↑</span>
          <span v-if="!isDetail">↓</span>
        </div>
        <div class="btn-more" @click="toMore">{{$t('com_footer.more')}}</div>
      </div>
    </div>
    <div class="date-wrap">
      <div class="date-month">{{ date.month }} , {{ date.year }}</div>
      <div class="date-svg">
        <svg style="width: 44px; height: 88px">
          <g>
            <line class="st0" x1="5.7" y1="58.5" x2="35.7" y2="58.5" />
            <line class="st0" x1="20.7" y1="0" x2="20.7" y2="25" />
            <circle class="st0" cx="20.7" cy="28" r="3" />
            <polygon
              class="st0"
              points="0.7,87 0.7,23.4 20.7,15 40.7,23.4 40.7,87 	"
            />
          </g>
        </svg>
        <div class="date-day">{{ date.day }}</div>
        <div class="date-week">{{ date.week }}</div>
      </div>
    </div>
    <div v-loading="articleLoading">
      <div class="article" v-for="item in list" :key="item.id">
        <div class="article-img" @click="toDetail(item.id)">
          <img :src="item.image" alt="" />
         
        </div>
        <div class="article-header">
          <div class="article-title">
            <a href="javascript:;">{{ item.section }}</a>
          </div>
          <div class="article-icon">
            <svg
              style="width: 44px; height: 44px"
              @click="toDetail(item.id)"
            >
              <g>
                <rect x="5.6" y="0.6" class="st1" width="30" height="30" />
                <polyline
                  class="st1"
                  points="5.6,5.6 0.6,5.6 0.6,35.6 30.6,35.6 30.6,30.6 	"
                />
                <g>
                  <line class="st1" x1="14.6" y1="15.6" x2="26.6" y2="15.6" />
                  <line class="st1" x1="20.6" y1="9.6" x2="20.6" y2="21.6" />
                </g>
              </g>
            </svg>
          </div>
        </div>
        <h2>
          <a href="javascript:;" @click="toDetail(item.id)">{{
            item.title
          }}</a>
        </h2>
        <h3>时间：{{ item.date }}</h3>
      </div>
    </div>
    <div class="paging" v-if="useractivated==true">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-size="listQuery.limit"
        layout="total, prev, pager, next"
        hide-on-single-page
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getPlate, getSection, getInfo } from "../http/api";
import emitter from "../utils/eventbus";
export default {
  data() {
    return {
      isDetail: false,
      useractivated:false,
      siteinfo:{},
      selecttype:-1,
      date: {
        year: "",
        month: "",
        day: "",
        week: "",
      },
      articleLoading: false,
      listQuery: {
        limit: 5,
        page: 1,
        section: "",
        query: "",
      },
      total: 0,
      list: [],
      sectionList: [],
      company: {},
        };
    },
  metaInfo() {
    return {
      title: this.siteinfo.name,
      meta: [
        {
          vmid: "description",
          name: "description",
          content: this.siteinfo.descript,
        },
         {
          vmid: "keyword",
          name: "keyword",
          content: this.siteinfo.keyword,
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  created() {
    this.listQuery.section = localStorage.getItem("section") || "";
    this.listQuery.query = localStorage.getItem("query") || "";
    emitter.on("toSearch", (res) => {
      if (res.section == "全部") {
        this.listQuery.section = "";
      } else {
        this.listQuery.section = res.section;
      }
      this.listQuery.query = res.query;
      this.getList();
    });
  },
  destroyed() {
    emitter.off("toSearch");
  },
  methods: {
    showDetail() {
      this.isDetail = !this.isDetail;
    },
    toDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id,
        },
      });
    },
    toMore() {
      this.$router.push({
        path: "/introduce",
        query: "",
      });
    },
    init() {
      this.getSiteInfo();
      this.getUserinfo();
      this.formatDate();
      this.getCompanyInfo();
      this.getListSection();
      
    },
    getSiteInfo(){
      
        var siteinfo = localStorage.getItem("site_info")
        if(siteinfo != undefined){
            siteinfo = JSON.parse(siteinfo)
        }
        this.siteinfo = siteinfo;
    },
    getUserinfo() {
      var userinfo = localStorage.getItem("userinfo");
      if(userinfo != undefined){
        userinfo = JSON.parse(userinfo);
        if(userinfo.activated) {
          this.useractivated = true;
        }
      }
    },
    getList() {
      this.articleLoading = true;
      window.scrollTo(0, 0);
      getPlate(this.listQuery).then((res) => {
        this.articleLoading = false;
        if (res && res.data && res.data && res.data.code == 20000) {
          const { data } = res.data;
          this.total = data.count;
          this.list = data.list;
          localStorage.setItem("section", "");
          localStorage.setItem("query", "");
        }
      });
    },
    async getCompanyInfo() {
      const res = await getInfo();
      if (res && res.data && res.data.code == 20000) {
        const { data } = res.data;
        const obj = {
          company: data.company,
          desc: data.desc,
        };
        this.company = obj;
        localStorage.setItem("company_name", data.company);
        localStorage.setItem("company_desc", data.desc);
        localStorage.setItem("company_email", data.email);
        localStorage.setItem("company_phone", data.phone);
      }
      this.listQuery.limit = res.data.data.count;
      this.getList();
    },
    getListSection() {
      getSection().then((res) => {
        if (res && res.data && res.data && res.data.code == 20000) {
          const { data } = res.data;
          this.sectionList = data;
        }
      });
    },
    handleCurrentChange(page) {
      this.listQuery.page = page;
      this.getList();
    },
    onChangeSection(item) {
      if(item != undefined){
        this.selecttype = item.id;
        this.listQuery.section = item.section;
      }else{
        this.selecttype = -1;
        this.listQuery.section = "";
      }
      this.getList();
    },
    formatDate() {
      var lang = localStorage.getItem("lang");
      if (lang != undefined) {
        if (lang == "ch") {
          let date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1 + "月";
          let day = date.getDate().toString().padStart(2, "0");
          let week = date.getDay();
          let weekArr = ["日", "一", "二", "三", "四", "五", "六"];
          const obj = {
            year: year,
            month: month,
            day: day,
            week: weekArr[week],
          };
          this.date = obj;
        } else {
          let date = new Date();
          let year = date.getFullYear();
          let mt_en = ["January","February","March","April","May","June","July","August","September","October","November","December"]
          let month =mt_en[  date.getMonth()]  ;
          let day = date.getDate().toString().padStart(2, "0");
          let week = date.getDay();
          let weekArr = ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat"];
          const obj = {
            year: year,
            month: month,
            day: day,
            week: weekArr[week],
          };
          this.date = obj;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.activate{
  color: red;
}
.nav-wrap {
  background-color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  // flex-direction: column;
  // padding: 0px 20px;
  margin-top: 20px;
  min-height: 44px;
  li {
    padding: 5px 0 !important;
    a {
      font-size: 18px; 
      font-weight: 500;
      cursor: pointer;
      letter-spacing: 1px;
    }
    a:hover {
      text-decoration: underline;
      color: #f00;
    }
    span {
      padding: 0;
      margin: 0;
      margin: 0 10px;
    }
  }
  li:hover {
    cursor: pointer;
  }
}

.office {
  display: flex;
  flex-direction: column;
  background-color: #000;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  h3 {
    letter-spacing: 2px;
    line-height: 100%;
    font-weight: 500;
    font-size: 28px;
    color: #fff;
    margin-block-start: 10px;
    margin-block-end: 10px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    height: 44px;
    line-height: 44px;
  }
  .office-content {
    padding: 0 20px;
    margin-top: 10px;
    p {
      color: #fff;
    }
  }

  .office-btn {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    .btn-details {
      padding: 10px 28px;
      border: 1px solid #fff;
      margin: 10px;
      color: #fff;
      cursor: pointer;
    }
    .btn-more {
      background-color: #fff;
      padding: 8px 28px;
      border: 1px solid #fff;
      margin: 10px;
      color: #333;
      cursor: pointer;
    }
    .btn-more:hover {
      background-color: #000;
      color: #fff;
    }
  }
}

.date-wrap {
  width: 100%;
  .date-month {
    padding: 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #4d4d4d;
    text-align: center;
    border-bottom: 1px solid #666;
  }
  .date-svg {
    width: 41px;
    height: 88px;
    margin: 0 auto;
    position: relative;
    .date-day {
      font-weight: 500;
      font-size: 18px;
      position: absolute;
      top: 32px;
      left: 10px;
    }
    .date-week {
      font-weight: 500;
      font-size: 18px;
      position: absolute;
      bottom: 2px;
      left: 11px;
    }
  }
}
.st0 {
  fill: none;
  stroke: #666666;
  stroke-miterlimit: 10;
}

.article {
  margin-top: 40px;
  width: 100%;
  .article-img {
    width: 100%;
    height: auto;
    cursor: pointer;
    img {
      width: 100%;
      height: auto;
    }
    .play-video-area {
      width: 100%;
      height: auto;
      overflow: hidden;
      margin: 0 auto;
      position: relative;
    }
  }
  .article-header {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .article-title {
      flex: 1;
      a {
        color: #ff0000;
        letter-spacing: 2px;
      }
      a:hover {
        color: #333;
      }
    }
    .article-icon {
      /* width: 35px;
      height: 35px; */
      cursor: pointer;
    }
  }
  h2 {
    margin-top: 20px;
    a:hover {
      color: #f00;
      text-decoration: underline;
    }
  }
  h3 {
    margin-top: 20px;
    font-weight: 400;
    color: #666;
    a {
      color: #666;
    }
    a:hover {
      color: #f00;
      text-decoration: underline;
    }
  }
}
.st1 {
  fill: none;
  stroke: #ff0000;
  stroke-miterlimit: 10;
}

.paging {
  margin-top: 40px;
  height: 45px;
  width: 100%;
  ::v-deep {
    .el-pager li.active,
    .el-pager li:hover,
    .el-pagination button:hover {
      color: #f00;
    }
  }
}
</style>
